<template>
  <div>
    <!-- <div class="cs"><Carousel /></div> -->
    <div>
      <p>打点</p>
      <div id="dv" class="img">
        <img id="bigImg" src="@/assets/images/a.jpg" width="800px" height="600px" />
      </div>
    </div>
  </div>
</template>

<script setup>
import Carousel from '@/components/AppProvider/carousel/index.vue'
// var ProportionHeightInImg //鼠标所选位置相对于所选图片高度的比例
// var ProportionWidthInImg //鼠标所选位置相对于所选图片宽度的比例
// function createMarker(x, y, divName) {
//   var div = document.createElement('div')
//   div.className = 'marker'
//   div.style.left = x + 'px'
//   div.style.top = y + 'px'
//   document.getElementById(divName).appendChild(div)
//   console.log('left: ' + x + 'px, top: ' + y + 'px')
// }
// document.getElementById('dv').onclick = function (e) {
//   e = e || window.event
//   var x = e.offsetX || e.layerX,
//     y = e.offsetY || e.layerY
//   console.log('x: ' + x + 'y: ' + y)
//   createMarker(x, y, 'dv')

//   //获取图片的高度和宽度
//   var myImg = document.querySelector('#bigImg')
//   var currWidth = myImg.clientWidth
//   var currHeight = myImg.clientHeight
//   ProportionWidthInImg = x / currWidth
//   ProportionHeightInImg = y / currHeight
// }
</script>
<style scoped>
.img {
  position: relative;
  border: solid 1px #000;
  display: inline-block;
}

.img .marker {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #f00;
}
.cs {
  margin-top: 50px;
  margin-left: 8%;
  margin-right: 45%;
}
</style>
